
<template>
  <div>
    <el-container>
      <el-aside class="nav-aside" width="200px">
        <el-menu
          mode="vertical"
          class="nav-menu"
          :default-active="$route.path"
          router
        >
          <el-submenu
            v-for="(item, index) in items"
            :key="`menu-item-${index}`"
            :index="`${index} + 1`"
          >
            <template slot="title">{{ item.title }}</template>
            <el-menu-item
              v-for="(subitem, index) in item.subitems"
              :Key="`submenu-item-${index}`"
              :index="subitem.path"
            >
              {{ subitem.title }}
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <h1>Red Pill后台管理系统</h1>
        </el-header>
        <el-main>
          <router-view :key="$route.path"></router-view>
        </el-main>
        <el-footer>Footer</el-footer>
      </el-container>
    </el-container>
  </div>
</template>
<script lang="ts">
interface Items {
  title: string;
  subitems: {
    title: string;
    path: string;
  }[];
}
/* eslint-disable */
import { Vue } from "vue-property-decorator";
export default class Main extends Vue {
  items: Items[] = [
    {
      title: "用户管理",
      subitems: [
        { title: "首页", path: "/" },
        { title: "课程列表", path: "/course/list" },

        { title: "首页管理", path: "/user" },
        { title: "首页设置", path: "/user" },
      ],
    },
    {
      title: "运营管理",
      subitems: [
        { title: "用户管理", path: "/list" },
        { title: "用户管理", path: "/list" },
        { title: "用户管理", path: "/courese" },
        { title: "用户管理", path: "/couse" },
        { title: "用户管理", path: "/couse" },
      ],
    },
  ];
}
</script>

<style scoped>
.nav-menu {
  height: 100vh;
}
</style>

